<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="formInline.fitName"
            placeholder="请输入商品名称"
            clearable
            @change="handlerstock"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品型号">
          <el-input
            v-model="formInline.fitModelId"
            placeholder="请输入商品型号"
            clearable
            @change="handlerstock"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select
            v-model="formInline.state"
            placeholder="请选择商品状态"
            clearable
            @change="handlerstock"
          >
            <el-option
              v-for="item in selectList"
              :label="item.name"
              :value="item.state"
              :key="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerstock">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        align="center"
        :header-cell-style="{
          width: '100%',
          background: '#FAFAFA',
          color: '#606266',
          height: '60px'
        }"
      >
        <el-table-column prop="fitName" label="商品名" width="180">
        </el-table-column>
        <el-table-column prop="inventory" label="库存数" width="180">
        </el-table-column>
        <el-table-column prop="fitModelName" label="商品型号">
        </el-table-column>
        <el-table-column prop="dynamicCos" label="动态成本"> </el-table-column>
        <el-table-column prop="dynamicInv" label="30天动态库存">
        </el-table-column>
        <el-table-column prop="supplierName" label="渠道"> </el-table-column>
        <el-table-column prop="state" label="商品状态">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.state == 1">启用</el-tag>
              <el-tag type="danger" v-else>停用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scoped">
            <div>
              <el-link type="danger" @click="showClose(1, scoped.row)"
                >出库</el-link
              >
              <el-link type="success" @click="showClose(2, scoped.row)"
                >入库</el-link
              >
              <el-link type="primary" @click="handleshowlog(scoped.row.id)"
                >操作记录</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formInline.pageSize"
          :current-page="formInline.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <!-- 出库/入库 -->
      <el-dialog
        :title="fitName == 'out' ? '出库' : '入库'"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="数量" prop="number">
            <el-input
              v-model="ruleForm.number"
              placeholder="请输入数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model="ruleForm.remark"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-form-item label="原因" prop="reason">
            <el-input
              type="textarea"
              v-model="ruleForm.reason"
              placeholder="请输入原因"
            ></el-input>
          </el-form-item>
          <el-form-item label="成本" prop="cost" v-if="fitName == 'in'">
            <el-input
              v-model="ruleForm.cost"
              placeholder="请输入成本"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerfit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 操作记录 -->
      <el-dialog
        title="操作记录"
        :visible.sync="logdialogVisible"
        width="50%"
        :before-close="handleCloselog"
      >
        <el-table :data="loglist" border style="width: 100%">
          <el-table-column prop="fitName" label="配件名称" width="180">
          </el-table-column>
          <el-table-column prop="number" label="配件数量" width="180">
          </el-table-column>
          <el-table-column prop="cost" label="成本"> </el-table-column>
          <el-table-column prop="add_time" label="操作时间"> </el-table-column>
          <el-table-column prop="addPerson" label="操作人"> </el-table-column>
        </el-table>
        <div class="pagination" style="margin-bottom: 20px">
          <el-pagination
            @size-change="handleSizeChangelog"
            @current-change="handleCurrentChangelog"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="formlog.pageSize"
            :current-page="formlog.pageNumber"
            layout="total, sizes, prev, pager, next, jumper"
            :total="logcount"
          ></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="logdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getFitInvList, fitOutIn, getOutInLog } from "../../utils/api";
export default {
  data() {
    return {
      formInline: {
        pageSize: 10,
        pageNumber: 1,
        fitName: "",
        fitModelId: "",
        state: ""
      },
      selectList: [
        {
          state: 1,
          name: "启用"
        },
        {
          state: 2,
          name: "停用"
        }
      ],
      tableData: [],
      count: 0,
      ruleForm: {
        fitId: "",
        type: "",
        number: "",
        remark: "",
        reason: "",
        cost: ""
      },
      rules: {
        number: [{ required: true, message: "请输入数量", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        cost: [{ required: true, message: "请输入成本", trigger: "blur" }]
      },
      dialogVisible: false,
      fitName: "out",
      logdialogVisible: false,
      loglist: [],
      formlog: {
        pageSize: 10,
        pageNumber: 1,
        fitId: ""
      },
      logcount: 0
    };
  },
  created() {
    this.handlerstock();
  },
  methods: {
    //获取库存列表
    handlerstock() {
      this.postRequest(getFitInvList, this.formInline).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.count = res.data.count;
        }
      });
    },
    // 出库 /入库
    showClose(num, row) {
      this.ruleForm.fitId = row.id;
      if (num == 1) {
        this.fitName = "out";
        this.ruleForm.type = 1;
      } else {
        this.ruleForm.type = 2;

        this.fitName = "in";
      }
      this.dialogVisible = !this.dialogVisible;
    },
    handleClose() {
      this.ruleForm.fitId = "";
      this.ruleForm.type = "";
      this.ruleForm.number = "";
      this.ruleForm.remark = "";
      this.ruleForm.reason = "";
      this.ruleForm.cost = "";
      this.dialogVisible = false;
    },
    // 点击确定出库/入库
    handlerfit() {
      this.$refs["ruleForm"].validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.ruleForm.number <= 0) {
          return this.$message.error("库存数量不能低于0哦!");
        }
        this.postRequest(fitOutIn, this.ruleForm).then(res => {
          if (res.code == 200) {
            if (this.fitName == "out") {
              this.$message.success("出库成功");
              this.handlerstock();
              this.dialogVisible = false;
              this.ruleForm.fitId = "";
              this.ruleForm.type = "";
              this.ruleForm.number = "";
              this.ruleForm.remark = "";
              this.ruleForm.reason = "";
              this.ruleForm.cost = "";
            } else {
              this.$message.success("人库成功");
              this.handlerstock();
              this.dialogVisible = false;
              this.ruleForm.fitId = "";
              this.ruleForm.type = "";
              this.ruleForm.number = "";
              this.ruleForm.remark = "";
              this.ruleForm.reason = "";
              this.ruleForm.cost = "";
            }
          } else {
            if (this.fitName == "out") {
              this.handlerstock();
            } else {
              this.handlerstock();
            }
          }
        });
      });
    },

    // 显示操作记录
    handleshowlog(id) {
      this.formlog.fitId = id;
      this.logdialogVisible = !this.logdialogVisible;

      this.hanldergetOutInLog();
    },
    //点击隐藏操作记录
    handleCloselog() {
      this.logdialogVisible = false;
    },
    // 操作记录
    hanldergetOutInLog() {
      this.postRequest(getOutInLog, this.formlog).then(res => {
        if (res.code == 200) {
          this.loglist = res.data.list;
          this.logcount = res.data.count;
        }
      });
    },
    //库存的分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlerstock();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.handlerstock();
    },
    //操作记录的分页

    handleSizeChangelog(val) {
      this.formlog.pageSize = val;
      this.hanldergetOutInLog();
    },
    handleCurrentChangelog(val) {
      this.formlog.pageNumber = val;
      this.hanldergetOutInLog();
    }
  }
};
</script>

<style></style>
